<template>
	<view>
		<div style="border-radius: 20rpx; margin: 20rpx; width: calc(100% - 40rpx);" class="slider-banner swiper" v-if='imgUrls'>
				<view class="swiper">
					<swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration"
					 indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
						<block v-for="(item,index) in imgUrls" :key="index">
							<swiper-item>
								<image :src="item.img" class="slide-image" @click="clickBanner(item)"></image>
							</swiper-item>
						</block>
					</swiper>
				</view>
		</div> 
		<scroll-view class="newcomers_enjoy" scroll-y :class="times.start_time? 'he':''"> 
			<!-- 活动列表展示 -->
			<!-- enjoyData.activity -->
			<view  v-if="enjoyData.activity">
				<view class="enjoy_bann">
					<view class="enjoy_time">
						<text v-if="times.start_time">限时购倒计时:</text>
						<countdown v-if="times.start_time"  class="countdown" :startTime="times.start_time" :endTime="times.end_time" />
					</view>
				</view>
				 

				<!-- 活动列表 -->
				<view class="enjoy_list">
					<view class="enjoy_items" v-for="item in enjoyData.activity" :key='item.id' 
					  @click="toEnjoyDetails(item)" >
						<view  class="look_fl">
							<text>{{item.title}}</text>
							<text style="font-size: 28rpx;">活动进行时</text>
						</view> 
						<view class="look_details">
							<image :src="item.image"></image>
						</view>
					</view>
				</view>
			</view>

			<!-- 任务列表展示 -->
			<view v-else>
				<view class="task_list">
					<navigator class="task_items" v-for="item in enjoyData.task" :key='item.id' hover-class="navigator-hover" :url="'./comers_video/index?id=' + item.id">

						<image class="task_items_img" :src="item.image"></image> 
						<image class="task_items_titimg" src="../../static/images/title@2x.png"></image>
						<view class="task_items_info">
							<text>{{item.title}}</text>
							<text>{{item.desc}}</text> 
							
							<view class="items_info_jd" v-if="item.userTask">
								<text class="info_jd_ywc" style="color: #26b12c;" v-if="item.userTask.use_time >= item.userTask.all_time">已完成</text>
								<text v-else class="info_jd_wwc">已观看 <i style="font-style: normal; color: #feb847; font-size: 40rpx; margin: 0 10rpx;" >{{ item.userTask? (item.userTask.use_time >= item.userTask.all_time ? '100' : parseInt( (item.userTask.use_time) / (item.userTask.all_time) * 100)):0 }}</i> %</text> 
								<view class="items_info_jd_bl" v-if="item.userTask.use_time < item.userTask.all_time">   
									<view   class="items_info_jd_child" :style="{width: (item.userTask? (item.userTask.use_time >= item.userTask.all_time ? '100' : parseInt( (item.userTask.use_time) / (item.userTask.all_time) * 100)):0) + '%'}"> </view> 
								</view>
								<view v-else class="items_info_jd_bl" style="background-color: #34b537;">
									
								</view>
							</view>
							
							<view class="items_info_jd" v-else> 
								<text  class="info_jd_wwc">已观看 <i style="font-style: normal; color: #feb847; font-size: 40rpx; margin: 0 10rpx;" >0</i> %</text>
								
								<view class="items_info_jd_bl">   
									<view class="items_info_jd_child"> </view>
									 
								</view> 
							</view>
							
						<!-- 	<view class="items_info_jd" >   
								<MyProgress 
								:wid='190' 
								:content='item.userTask? (item.userTask.use_time >= item.userTask.all_time? "已完成":"未完成"): "未完成"' 
								contentBacColor='#eee' 
								:sumD='item.userTask? (item.userTask.use_time > item.userTask.all_time ? item.userTask.use_time : item.userTask.all_time):""' 
								:nowD='item.userTask? (item.userTask.use_time):""'>
								</MyProgress> 
								  
								<text class="items_info_jd_bl">{{ item.userTask? (item.userTask.use_time >= item.userTask.all_time ? '100' : parseInt( (item.userTask.use_time) / (item.userTask.all_time) * 100)):0 }}%</text>
							</view> -->
							<text class="gk">观看视频</text>
						</view>
					</navigator>
				</view>
				<!-- 分享按钮 isFinished为 1 的时候展示-->
				<view class="share_task" v-if="isFinished && isType == 1">
					<!-- <navigator url="/pages/index/index" open-type="switchTab">残忍拒绝</navigator> -->
					<text @click="() => {isShowSelectType = true}">反馈赢积分</text>
				</view>
				<!-- 分享有礼  v-if="isFinished && isType === 2" -->
				<view class="share_gift" v-if="isFinished && isType == 2" @click="toComersShare">
					<text>分享有礼({{shareNums}})</text>
				</view>

				<!-- 反馈赢积分弹框 -->
				<view class="select_type" v-show="isShowSelectType " @click="downFeedBack">
					<view class="select_type_item">
						<!-- 已选择的内容 -->
						<view class="select_cont">
							<textarea @click.stop class="textarea" v-model="feedBackInfo" maxlength="-1" name="" id="" cols="30" rows="10" placeholder="输入反馈内容"></textarea>
							<!-- 上传图片按钮 -->
							<view class="upload_image" @click.stop>
								<!-- 上传后的图片列表 -->
								<view class="image_list" v-for="(item,index) in imageList" :key='index'>
									<image :src="item.url" mode=""></image>
									<image class="cancel_img" @click="indexImg(index)" src="../../static/images/cancel.png" mode=""></image>
								</view>

								<view class="img_box" v-show="imageList.length < 2">
									<image src="../../static/images/up_img.png" mode="" @click="upImg"></image>
									<text @click="upImg" v-show="imageList.length == 0"><text style="display: block; color: #f85c2a;">(使用前)</text></text>
									<text @click="upImg" v-show="imageList.length == 1"><text style="display: block; color: #f85c2a;">(使用后)</text></text>
								</view>
							</view>
						</view>
						<view class="select_xz">
							<!-- <text @click.stop="downFeedBack ">取消</text> -->
							<text @click.stop="feedback">反馈</text>
						</view>
					</view>
				</view>

				<!-- 大转盘 -->
				<view class="wheel_draw_box" v-show="showDownWheelDraw && filterLotteryList.length > 0">
					<wheelDraw class='wheelDraw' v-if="filterLotteryList.length > 0" ref='wheelDraw' :winIndex='winIndex' :prizeList='filterLotteryList'
					 :rotatingTime='3' @routingBefore="routingBefore" @routingFinish="routingFinish"></wheelDraw>
					<image class="down_wheel" @click="downWheelDraw" src="../../static/images/down1.png"></image>
				</view> 
			</view>
		</scroll-view>  
	</view>

</template>

<script> 
	
	import countdown from "@/components/cz-countdown/cz-countdown.vue"
	import wheelDraw from '@/components/ant-wheelDraw/ant-wheelDraw.vue'
	import MyProgress from '@/components/my-progress.vue'  
	import {
		HTTP_REQUEST_URL
	} from '../../config/app.js'
	import {
		lists,
		shareNum,
		feedBack,
		getLotteryList,
		addLotteryOrder,
		getAddressList 
	} from "@/api/user";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";

	export default {
		components: {
			countdown,
			wheelDraw,
			MyProgress 
		}, 
		onShow() {      
			this.activityList() 
			this.$forceUpdate()
			// 获取收货地址
			this.getAddressList()    
				
		},
		onHide(){
			clearTimeout(this.reasonTime)
		},
		data() {
			return {
				 imgUrls: [],
				enjoyData: {},
				times: 0,
				oldTimes: 0,
				// 是否完成任务 0 未完成 1 已完成
				isFinished: null,
				// 1 反馈赢积分   2  分享有礼
				isType: null,
				// 获取分享次数
				shareNums: null,
				// 反馈赢积分列表
				isShowSelectType: false,
				// 反馈内容
				feedBackInfo: '',
				// 已上传的图片列表
				imageList: [],
				// 是否开启大转盘 0不展示 1 展示
				feedBackType: '',
				//转盘下标
				winIndex: 2,
				// 大转盘数据
				lotteryList: [],
				// 过滤后的转盘数据
				filterLotteryList: [],
				// 控制转盘展示隐藏
				showDownWheelDraw: true,
				// 收货地址id
				areaId: '',
				interval: 3000,
				autoplay:true,
				circular:true,
			    duration: 500,
				reasonTime: null
			};
		},
		computed: mapGetters(['isLogin']),
		
		methods: {
			// 获取活动列表
			activityList() { 
				let that = this
				lists().then(res => {
					if (res.status == 200) { 
						this.imgUrls = res.data.banner
						that.isFinished = res.data.is_finished
						that.isType = res.data.type
						that.feedBackType = res.data.feedBack     
						if(res.data.fail_reason){ 
							uni.showToast({
								title: res.data.fail_reason,
								icon: 'none',
								duration: 3000,
								 complete(){
									clearTimeout(that.reasonTime)
									that.reasonTime = setTimeout(() => {
										 that.isShowSelectType = true
									 },3000)
								 }
								})
							}
						 
						// 获取用户分享次数
						if (that.isFinished == 1 && that.isType == 2) {
							that.shareNum()
						}
						// 获取大转盘抽奖列表
						if (that.feedBackType == 1) {
							that.getLotteryList()
						}
						if (res.data.activity) {
							that.enjoyData = res.data   
							that.times = res.data.time
						} else {
							that.enjoyData = res.data 
						}
					}else{
						return this.$util.Tips({
							title: res.msg,
						},
						{
							tab: 3,
							url: 1
						});
					}
				}).catch(res => {
					uni.showModal({
						title: '提示',
						content: res,
						icon: 'none',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								uni.switchTab({
									url: '../index/index'
								})
							}
						}
					})
				});
			}, 
			// 获取分享次数
			shareNum() {
				shareNum().then(res => {
					if (res.status == 200) {
						this.shareNums = res.data.share_num
					}
				})
			},
			// 获取大转盘抽奖列表
			getLotteryList() {
				let that = this
				getLotteryList().then(res => {
					if (res.data.status == 200) {
						that.winIndex = res.data.result.key 
						that.lotteryList = res.data.result.data
						that.lotteryList.map((item, index) => {
							that.filterLotteryList.push(item.desc) 
						})
					} else {
						return this.$util.Tips({
							title: res.msg,
						});
					}
				})
			},
			// 前往分享页面
			toComersShare() {
				uni.navigateTo({
					url: './comers_share/index'
				})
			},
			// 反馈赢积分
			feedback() {
				let that = this

				let data = {
					before_img: that.imageList.length >= 1 && that.imageList[0].url,
					after_img: that.imageList.length >= 2 && that.imageList[1].url,
					evaluation: that.feedBackInfo,
					type: 'img'
				}
				feedBack(data).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						that.isShowSelectType = false
						that.imageList = []
						that.evaluation = ''
						that.feedBackInfo = ''
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						// that.imageList = []
						// that.evaluation = ''
					}
				})
			},
			// 上传图片
			upImg() {
				let that = this
				 
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: ['album','camera'],
					success: function(res) {
						uni.showLoading({title: '上传中'})
						uni.uploadFile({
							url: HTTP_REQUEST_URL + '/api/upload/image',
							filePath: res.tempFilePaths[0],
							header: {
								"Authori-zation": "Bearer " + that.$store.state.app.token
							},
							fileType: 'image',
							formData: {
								'file': res.tempFiles[0],
								'file_name': res.tempFiles[0].name
							},
							success(res) {  
								uni.hideLoading();
								if(JSON.parse(res.data).status == 400){
									uni.showToast({
										title: JSON.parse(res.data).msg,
										icon: 'none'
									})
								}else{
									let imgUrl = JSON.parse(res.data)
									that.imageList.push(imgUrl.data)
								} 
							},
							// fail(err) {  
							// 	uni.showToast({
							// 		title: err.msg,
							// 		icon: 'none'
							// 	})
							// }
						})
					},
					
					fail: function(err) {
						console.log(err)
					}
				})
				
			},
			// 关闭弹框
			downFeedBack() {
				this.isShowSelectType = false
				uni.hideLoading();
			},
			// 删除图片 
			indexImg(index) {
				this.imageList.splice(index, 1)
			},
			// 开始抽奖
			routingBefore() {
				this.$refs.wheelDraw.routing() //开始转动
			},
			// 抽奖结束
			routingFinish() {
				let that = this
				uni.showModal({
					title: '中奖提示',
					content: that.lotteryList[that.winIndex].desc,
					success(res) {
						if (res.confirm) {
							that.addLotteryOrder(that.lotteryList[that.winIndex].id, that.areaId)
							that.showDownWheelDraw = false
						} else if (res.cancel) {
							that.showDownWheelDraw = false
						}
					}
				})
			},
			// 生成抽奖完成订单
			addLotteryOrder(id, areaId) {
				addLotteryOrder(id, areaId).then(res => {
					if (res.data.status == 200) { 
						return this.$util.Tips({
							title: res.msg,
						});
					} else {
						return this.$util.Tips({
							title: res.msg,
						});
					}
				}).catch(err => {
					console.log(err)
				})
			}, 
			// 关闭转盘
			downWheelDraw() {
				this.showDownWheelDraw = false
			},
			// 获取地址数据
			getAddressList: function() {
				let that = this;
				that.loading = true;
				getAddressList().then(res => {
					that.loading = false;
					// 如果没有地址
					if (!res.data.length) {
						uni.showModal({
							title: '提示',
							content: '您需要完善收货地址,确认后前往',
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '../users/user_address/index?type=newcomers'
									})
								} else if (res.cancel) {
									uni.switchTab({
										url: '../index/index'
									})
								}
							}
						})
					}
					// is_default 该字段为默认地址 
					res.data.map((item) => {
						if (item.is_default == 1) {
							that.areaId = item.id 
						}
					}) 
				})
			}, 
			toEnjoyDetails(item){ 
				setTimeout(() => {uni.$emit('getEnjoyDetails', item) },400)
				uni.navigateTo({
					url: "./enjoy_details/index?id=" + item.id  + "&type=enjoy"
				}) 
			} 
		}
	}
</script>

<style lang="less">
	.swiper,swiper,swiper-item,.slide-image{
		width: 100%;
		height: 280rpx;
		border-radius: 20rpx;
	}
	.he{
		height: 100vh !important;
	}
	.newcomers_enjoy { 
		height: calc(100vh - 400rpx);  
		.enjoy_bann{ 
			padding: 60rpx 0 0 40rpx;
			height: 260rpx;
			background-image: url(../../static/images/comers-img.png) ;
			background-size: 100% 100%;
			.enjoy_time {
				display: flex; 
				height: 100rpx;
				font-size: 42rpx;
				color: #fcecc0;
			
				text {
					line-height: 100rpx;
				}
			
				.countdown {
					color: #ffce73;
					margin-left: 20rpx;
					font-size: 32rpx; 
					 
				}
				 
			}
		 }
		 

		.enjoy_list {  
			padding: 10rpx 20rpx; 
			.enjoy_items {
				display: flex;
				flex-wrap: wrap ;
				justify-content: space-between;
				padding: 0 20rpx;
				color: #fff;
				margin-bottom: 20rpx;
				font-size: 36rpx;
				font-weight: 700;
				height: 260rpx;
				line-height: 200rpx; 
				background: #ff5a5a;
				border-radius: 10rpx; 
				.look_fl{
					padding-top: 50rpx;
					line-height: 40px;
					& text:nth-child(1){
						display: block;
					}
				}
				.look_details{
					margin: 10rpx 0;
					width: 300rpx;
					height: calc(100% - 20rpx);
				    border-radius: 10rpx; 
					image {
						width: 100%;
						height: 100%;
						border-radius: 10rpx;
					}
				} 
			} 
		}

		.task_list {
			padding: 0 20rpx;
			.task_items {
				margin-bottom: 20rpx; 
				display: flex;
				max-height: 360rpx;
				background-color: #fff; 
				border-radius: 20rpx;
				box-shadow: 0px 0px 16rpx 0px rgba(99, 99, 99, 0.18);
				.task_items_img {
					width: 260rpx;
					height: 280rpx;
					border-radius: 20rpx;
				}
				.task_items_titimg{
					position: absolute;
					height: 60rpx;
					width: 60rpx;
				}

				.task_items_info {
					position: relative;
					flex: 1;
					margin-left: 30rpx;
					overflow: hidden;
					.items_info_jd{
						 font-size: 32rpx;
						 color: #929292;
					}
					.items_info_jd_bl{
						position: relative;
						margin-top: 20rpx;
						width: 400rpx;
						height: 20rpx;
						border-radius: 10rpx;
						background-color: #ffeaab;
						.items_info_jd_child{
							position: absolute;
							width: 0%;
							height: 100%;
							border-radius: 10rpx;
							background-color: #feae37;
						}
					}

					& text:nth-child(2) {
						margin-top: 20rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						min-height: 80rpx;
						line-height: 40rpx;
					}

					.gk {
						position: absolute;
						top: -20rpx;
						right: -20rpx;
						margin-top: 20rpx;
						float: right;
						display: block;
						width: 180rpx;
						text-align: center;
						height: 60rpx;
						line-height: 60rpx;
						color: #fff;
						border-radius: 20rpx;
						font-size: 26rpx;
						background-color: #e93323;
					}
				}
			}
		}

		.share_task,
		.share_gift {
			position: fixed;
			bottom: 10rpx;
			width: 100%;
			display: flex;
			height: 80rpx;
			text-align: center;
			color: #fff;
			line-height: 80rpx;

			navigator,
			text {
				margin: 0 30rpx;
				flex: 1;
				w
				background: #656865;
				border-radius: 20rpx;
			}

			& text {
				background-image: linear-gradient(to right, #f62c2c, #f96829);
			}
		}

		.wheel_draw_box {
			position: fixed;
			top: 0;
			width: 100vw;
			height: 100vh;
			background: rgba(0, 0, 0, 0.4);

			.wheelDraw {
				margin-top: 50%;
			}

			.down_wheel {
				display: block;
				margin: 20rpx auto;
				width: 80rpx;
				height: 80rpx;
			}
		}

		.select_type {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);

			.select_type_item {
				padding: 40rpx 20rpx;
				position: fixed;
				z-index: 100;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 80%;
				border-radius: 20rpx; 
				background: url(../../static/images/bg@2x.png) no-repeat;
				background-size: 100% 100%;
			}

			.select_cont {
				margin: 20rpx;
				position: relative;
				min-height: 400rpx;
				font-size: 34rpx;
				line-height: 100rpx;
				background-color: #fff;

				.textarea {
					padding: 10rpx;
					width: 100%;
					height: 200rpx;
					color: #666;
					border: 1rpx solid #eee;
					border-radius: 20rpx;
				}

				.upload_image {
					margin: 20rpx 0;
					display: flex;
					height: 140rpx;
					
					.img_box,
					.image_list {
						display: flex;
						flex-direction: column;
						width: 140rpx;
						height: 100%;
						text-align: center;
						background: #eee5e554;
						line-height: 28rpx;
						font-size: 24rpx;
						border: 1rpx dashed #999;

						image { 
							display: block;
							margin: 10rpx auto;
							width: 80rpx;
							height: 70rpx;
						}
					}
					.img_box{
						background-color: #ffe9c6;
					}
					// 图片上传后的列表
					.image_list {
						position: relative;
						margin-right: 20rpx;
						background-color: #fff;

						image {
							margin: 0;
							width: 100%;
							height: 100%;
						}

						.cancel_img {
							position: absolute;
							right: -20rpx;
							top: -20rpx;
							width: 40rpx;
							height: 40rpx;
						}

					}
				}

				.select_cz {
					position: absolute;
					right: 20rpx;
					bottom: 20rpx;
					width: 100rpx;
					text-align: center;
					line-height: 40rpx;
					font-size: 26rpx;

					.select_cz_img {
						display: block;
						margin: 0 auto;
						width: 60rpx;
						height: 60rpx;
					}
				}
			}

			.select_xz {
				width: 100%;
				display: flex;
				text {
					margin: 0 auto;
					width: 360rpx;
					height: 70rpx;
					line-height: 70rpx;
					font-size: 32rpx;
					color: #fff;
					text-align: center;
					border-radius: 20rpx;
					background-color: #e93323;
				}
				// text {
				// 	flex: 1;
				// 	margin: 0 20rpx;
				// 	height: 80rpx;
				// 	line-height: 80rpx;
				// 	text-align: center;
				// 	border-radius: 20rpx;
				// 	color: #fff;
				// 	background-image: linear-gradient(to right, #f62c2c, #f96829);
				// }

				// & text:last-child {
				// 	background: #22ac38;
				// }
			}
		}
	}
 
</style>
